
$--color-text-master: #303133; //主要文字颜色
$--color-text-base: #606266; //文字主体色
$--color-text-secondary: #909399; //次要文字颜色
$--color-text-placeholder: #C0C4CC; //占位文字颜色
$--color-text-link: #409eff; //链接色

$--color-primary: #409EFF; // 全局主色
$--color-success: #67C23A; // 成功色
$--color-warning: #E6A23C; // 警告色
$--color-danger: #F56C6C; // 错误色
$--color-info: #909399; // 信息色

$--color-border-1level: #DCDFE6;
$--color-border-2level: #E4E7ED;
$--color-border-3level: #EBEEF5;
$--color-border-4level: #F2F6FC;

$--color-bg-base: #fafafa;

$--size-font-x-small: 1.2rem; //辅助文字
$--size-font-small: 1.3rem;   //正文(小)
$--size-font-base: 1.4rem;    //正文
$--size-font-medium: 1.6rem;  //小标题
$--size-font-large: 1.8rem;   //标题
$--size-font-x-large: 2rem;  //主标题

$--box-shadow-base : 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); //阴影
$--box-shadow-light : 0 2px 12px 0 rgba(0, 0, 0, 0.1);  //浅阴影
$--box-shadow-light-small : 0 2px 4px 0 rgba(0, 0, 0, 0.1);  //小的浅阴影

$--header-height: 50px;
$--tags-height: 34px;
$--aside-width: 210px;
$--aside-width-small: 64px;
$--content-top: 15px;
$--content-right: 15px;
$--content-bottom: 5px;
$--content-left: 15px;
// $--header-content-space: 24px;
// $--content-height: calc(100vh - 64px - 24px - 16px);
// $--sider-content-space: 16px;

:export {
  headerHeight: $--header-height;
  tagsHeight: $--tags-height;
  asideWidth: $--aside-width;
  asideWidthSmall: $--aside-width-small;
  contentTop: $--content-top;
  contentRight: $--content-right;
  contentBottom: $--content-bottom;
  contentLeft: $--content-left;
}

//面包屑
$--color-breadcrumb: #97a8be;

// 菜单样式变量
$--color-menuText: #bfcbd9;
$--color-menuActiveText: #409eff;
$--color-subMenuActiveText: #f4f4f5;

$--color-menuBg: #304156;
$--color-menuHover: #263445;

$--color-subMenuBg: #1f2d3d;
$--color-subMenuHover: #001528;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $--color-menuText;
  menuActiveText: $--color-menuActiveText;
  subMenuActiveText: $--color-subMenuActiveText;
  menuBg: $--color-menuBg;
  menuHover: $--color-menuHover;
  subMenuBg: $--color-subMenuBg;
  subMenuHover: $--color-subMenuHover;  
}